<template>
<div class="con">
    <!-- 已登陆 -->
    <!-- $store.state.logintoken -->
    <div class="head login" v-if="logintoken">
        <div class="topcon flex flex-left flex-center">
            <div class="left"><img :src="userinfo.photo" alt=""></div>
            <div class="right">{{userinfo.name}}</div>
           <div class="editor" @click="$router.push(`/userprofile`)">编辑资料</div>
        </div>
        <div class="bottomcon flex flex-center flex-between">
            <div class="item" @click="$router.push({path:`/userfocusfans/0`})">
                <p class="userinfonum">{{userinfo.follow_count}}</p>
                <p>关注</p>
            </div>
            <div class="item" @click="$router.push({path:`/userfocusfans/1`})">
                <p class="userinfonum">{{userinfo.fans_count}}</p>
                <p>粉丝</p>
            </div>
            <div class="item">
                <p class="userinfonum">{{userinfo.like_count}}</p>
                <p>获赞</p>
            </div>
        </div>
    </div>
    <!-- 未登录 -->
    <div class="head nologin" v-else>
        <router-link to='/login'>
            <div class="logincon">
                <img src="@/assets/mobile.png" alt="">
                <span>登录 / 注册</span>
            </div>
        </router-link>
    </div>
    <van-grid clickable column-num="2">
        <van-grid-item icon="like-o" style="color:#d55555" text="收藏" @click="$router.push(`/userfavoriteslist`)"   />
        <van-grid-item icon="underway-o" style="color:#ff8100" text="历史"  @click="$router.push(`/userhistorylist`)"  />
    </van-grid>
    <van-cell-group>
        <van-cell title="小二同学" to="/xiaoai" is-link />
    </van-cell-group>
    <div class="loginout" v-if="$store.state.logintoken" @click="loginout">退出登录</div>
</div>
    
</template>

<script>
import { mapState } from 'vuex' // 映射state
import {setItem,removeItem} from '@/utils/localfun'
import { getuser } from '@/api/user'
export default {
  components: {},
  props: {},
  data() {
    return {
        userinfo:''
    };
  },
  watch: {},
  computed: {
      ...mapState(['logintoken'])// 映射state
  },
  methods: {
      loginout(){
          this.$store.commit('addtoken',null)
          removeItem('userinfo')
      },

      async getuserdata(){
          try{
              const res=await getuser()
              this.userinfo=res.data.data
              setItem('userinfo',res.data.data)
              console.log(this.userinfo)
          }
          catch(err){
              console.log(err)
              
              this.$toast('系统错误')
          }
           
      },
  },
  
  created() {
      if(this.$store.state.logintoken){
        this.getuserdata()
      }else{
        removeItem('userinfo')
      }
  }
};
</script>
<style lang="less" scoped>
body{
    background: rgb(245,247,249);
    min-height: 100%;
}
.con{font-size: 14px;min-height: 100vh;background: rgb(245,247,249)}
.head{
    height: 300px;
    background: url('~@/assets/banner.png') no-repeat 100%;
    text-align: center;
    padding-top: 1px;
    .logincon{
        display: flex;
        justify-content: center;
        align-items: center;
        flex-direction: column;
        margin-top: 50px;
        img{
            width:150px;
        }
        span{
            color: white;
            font-size: 16px;
            margin-top: 13px;
        }
    }
    &.login{
        height: auto;
        padding: 20px;
        box-sizing: border-box;
        .topcon{
            position: relative;
            padding-top: 20px;
            padding-left: 10px;
            box-sizing: border-box;
            .left img{
                width: 150px;
                height: 150px;
                border-radius: 50%;
                border:4px solid #fff;
            }
            .right{
                font-size: 38px;
                margin-left: 20px;
                color: white;
            }
            .editor{
                position: absolute;
                width: 150px;
                height: 40px;
                line-height: 40px;
                font-size: 18px;
                text-align: center;
                background: rgb(235, 235, 235);
                color: rgb(7, 7, 7);
                border-radius: 20px;
                right: 20px;
                top: 50%;
                transform:translateY(-50%)
            }
        }
        .bottomcon{
            color:white;
            margin-top: 20px;
            .item{
                flex:1;
                text-align: center;
                font-size:21px;
            }
        }
        
        
    }
}
.userinfonum{
    font-size:40px;
    font-weight: bold;
    color: rgb(253, 100, 100);    
    margin: 0;
}
.loginout{
    color: red;
    height: 80px;
    line-height: 80px;
    width: 100%;
    text-align: center;
    margin-top: 20px;
    font-size:30px;
    background: #fff;
}
</style>